import React, { useState } from 'react'
import { Layout } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';
import Menus from '../components/Menus'
const { Header, Sider, Content } = Layout;

export default function MenuView(props) {
    const [collapsed, setCollapsed] = useState(false)
    const toggle = () => {
        setCollapsed(true)
    };
    return (
        <div>
            <Layout style={{ width: '100%', height: "100vh" }}>
                <Sider collapsible collapsed={collapsed}>
                    <div className="logo" />
                    <Menus></Menus>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }}>
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: toggle,
                        })}
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        {props.children}
                    </Content>
                </Layout>
            </Layout>

        </div>

    )
}
